<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery-1.5.2.min.js"></script>
		<script type="text/javascript">
	var jq = jQuery;
</script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery-ui-1.8.6.custom.min.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/jqgrid/grid.locale-en.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/jqgrid/jquery.jqGrid.min.js"></script>

			<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/plugins/grid.addons.js"></script>

<script type="text/javascript"
			src="${pageContext.request.contextPath}/jsutils/js/plugins/jquery.searchFilter.js"></script>

	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.widget.js"></script>
	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.datepicker.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jsutils/js/jquery/jquery.maskedinput-1.3.js"></script>
	<script src="${pageContext.request.contextPath}/jsutils/js/ui/jquery.ui.core.js"></script>
	
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Clientes</title>

	</head>

	<body>

<script type="text/javascript">
	
	
  
	$(function() {
	
	

		$.extend($.jgrid.defaults, {
			datatype : 'json',
			jsonReader : {
				repeatitems : false,
				total : function(result) {
					//Total number of pages
					return Math.ceil(result.total / result.max);
				},
				records : function(result) {
					//Total number of records
					return result.total;
				}
			},
			prmNames : {
				rows : 'max'
			},
			height : 'auto',
			width : 800,
			viewrecords : true,
			rowList : [ 10, 20, 50, 100 ],
			altRows : true,
			loadError : function(xhr, status, error) {
				alert(error);
			}
		});

		$.extend($.jgrid.add, {
			closeAfterEdit : true,
			closeAfterAdd : true,
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeEditData : function(data) {
				delete data.oper;
				return JSON.stringify(data);
			}
		});

		$.extend($.jgrid.edit, {
			closeAfterEdit : true,
			closeAfterAdd : true,
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeEditData : function(data) {
				delete data.oper;
				return JSON.stringify(data);
			}
		});
			$.extend($.jgrid.del, {
			ajaxEditOptions : {
				contentType : "application/json"
			},
			mtype : 'PUT',
			serializeDelData : function(data,postdata) {
				
				return JSON.stringify(data);
			}
		});


		var editOptions = {
			width:400,height:300,closeAfterEdit:true,
		
				    
			onclickSubmit : function(params, postdata) {
				params.url = URL + '/' + postdata.id;				
			},
			afterSubmit : function(response, postdata) 
				{ 
			        var result = eval('(' + response.responseText + ')');
					var errors = "";
					
			        if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
			        }  else {
			        	jq("#dialog").text('Entry has been updated successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
			    	// only used for adding new records
			    	var new_id = null;
			    	
					return [result.success, errors, new_id];
				}
				
				
		};
		var addOptions = {
			width:400,height:300,closeAfterAdd:true,
			onclickSubmit : function(params, postdata) {
				params.url = URL + 'save';				
			},
			afterSubmit : function(response, postdata) 
				{ 
			        var result = eval('(' + response.responseText + ')');
					var errors = "";
					
			        if (result.success == false) {
						for (var i = 0; i < result.message.length; i++) {
							errors +=  result.message[i] + "<br/>";
						}
			        }  else {
			        	jq("#dialog").text('Entry has been added successfully');
						jq("#dialog").dialog( 
								{	title: 'Success',
									modal: true,
									buttons: {"Ok": function()  {
										jq(this).dialog("close");} 
									}
								});
	                }
			    	// only used for adding new records
			    	var new_id = null;
			    	
					return [result.success, errors, new_id];
				},
			afterShowForm:function(){
				$( "#birthdayString" ).datepicker();
				$( "#birthdayString" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
			}	
				
		};
		var delOptions = {
 	 onclickSubmit : function(params,postdata) {
 	 			params.url = URL + 'delete/' + postdata;				
			}
 	  }
		

		var URL = '${pageContext.request.contextPath}/customer/';
		
		var options = {
			url : URL+"/list",
			editurl : URL,
			colModel : [ {
				name:'id', label: 'ID',
				search: false,
				formatter:'integer',
				width: 40,
				editable: true,
				editoptions: {disabled: true, size:5}
			}, {
				name : 'firstName',label: 'Nombre',
				index : 'firstName',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'lastName', label: 'Apellido',
				index : 'lastName',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'address', label: 'Direccion',
				index : 'address',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'birthdayString',label: 'F. Nacimiento',
				index : 'birthdayString',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10,
					dataInit:function(el){$(el).mask("99-99-9999");}										
				}
			}, {
				name : 'email',
				index : 'email', label:'E-mail',
				width : 100,
				editable : true,
				editrules : {
					required : true
				},
				editoptions : {
					size : 10
				}
			}, {
				name : 'city',
				index : 'city', label: 'Ciudad',
				width : 46,
				align : 'center',
				editable : true,
				editoptions : {
					size: 15
				}
			},
			{
				name : 'createdBy',
				index : 'createdBy',
				align : 'center',
				search: false,
				editable : true,
				hidden: true
			},
			{
				name : 'createdOn',
				index : 'createdOn',
				align : 'center',
				editable : true,
				search: false,
				hidden: true
			}
			
			 ],
			caption : "Customers",
			pager : '#pager',
			height : 'auto',
			ondblClickRow : function(id) {
				jQuery(this).jqGrid('editGridRow', id, editOptions);
			},
			
			onSelectRow: function(ids) {
                    if (ids != null) {
                        var data = $("#list").getRowData(ids);
                        thisInvoice = ids;                        
                        jQuery("#idCust").val(ids);                        
                    }
                }//onSelect			
			
		};

		$("#gridCustomer").jqGrid(options).navGrid('#pager', {search: false}, //options
		editOptions, addOptions, delOptions, {} // search options,
		
		);

$("#srccontents").filterGrid("#gridCustomer",{
    gridModel:true,
    gridNames:true,   
    formtype:"vertical",
    enableSearch: true,   
    enableClear: true,
    autosearch: true 
    
  });
  
    $( "#sg_birthdayString" ).datepicker();
	$( "#sg_birthdayString" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
	
  
	});
	
	
	
</script>

		<p>
			Customers
		</p>
	<div id="srccontents"></div>
	<br/>
	
	<form action="${pageContext.request.contextPath}/customer/gotoInvoices" method="GET">
		<input type="hidden" name="id" id="idCust" value="" />
		<button type="submit" class=".ui-button">Revisar Facturas</button> 
	</form>
	
	<table id="tblcontents" class="scroll"></table> 
	<div id="tblcontentsPager" class="scroll" style="text-align:right;">
	
	</div> 
		
		<div id="jqgrid">
			<table id="gridCustomer"></table>
			<div id="pager"></div>
		</div>

		<div id="dialog" title="Feature not supported" style="display: none">
			<p>
				That feature is not supported.
			</p>
		</div>

		<div id="dialogSelectRow" title="Warning" style="display: none">
			<p>
				Please select row
			</p>
		</div>
		
		

	</body>

</html>